<div class="app-namespace-selector">
  <ng-template [ngIf]="showDropdown" [ngIfElse]="hideDropdown">
    <clr-dropdown class="dropdown-top" [clrCloseMenuOnItemClick]="true">
      <button type="button" class="dropdown-button" clrDropdownTrigger>
        <clr-icon shape="namespace"></clr-icon>
        {{ currentNamespace }}
        <clr-icon shape="caret down"></clr-icon>
      </button>
      <clr-dropdown-menu
        class="dropdown-top"
        *clrIfOpen
        [clrPosition]="'bottom-right'"
      >
        <label class="dropdown-header">Namespaces</label>
        <ng-container
          *ngFor="let namespace of namespaces; trackBy: trackByIdentity"
        >
          <button
            type="button"
            class="dropdown-button"
            [ngClass]="namespaceClass(namespace)"
            clrDropdownItem
            (click)="selectNamespace(namespace)"
            [routerLink]="routerLinkPath(namespace)"
          >
            {{ namespace }}
          </button>
        </ng-container>
      </clr-dropdown-menu>
    </clr-dropdown>
  </ng-template>
  <ng-template #hideDropdown>
    <clr-icon shape="namespace"></clr-icon>
    [All Namespaces]
  </ng-template>
</div>
